<template>
   <div class="main">
    <el-tabs type="border-card">
    <el-tab-pane>
    <span slot="label" class="labelcolor">账单明细</span>
        <el-row>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="要货工地" prop="region">
                <el-select v-model="value" placeholder="请选择工地" class="forminput">
                    <el-option
                    v-for="item in sites"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
            <el-col :span="8">
            <el-date-picker type="date" placeholder="请选择时间范围起始" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" offset="1">---</el-col>
            <el-col :span="8">
            <el-date-picker type="date" placeholder="请选择时间范围终止" v-model="form.date2" style="width: 100%;"></el-date-picker>
            </el-col>
            </el-form-item>
            <el-form-item>
            <el-button class="remerber" icon="el-icon-search" @click="onSubmit" style="margin-left:20%">搜索</el-button>
            <el-button class="remerber" style="margin-left:20%">导出</el-button>
            </el-form-item>
           </el-form>
        </el-row>
       <el-row>
         <el-table
            :data="tableData"
            border
            show-summary
            style="width: 95%;margin-left:3%">
            <el-table-column
            prop="data"
            label="日期"
            width="120">
            </el-table-column>
            <el-table-column
            prop="sitename"
            label="要货工地"
            width="160">
            </el-table-column>
            <el-table-column
            prop="huwuname"
            label="商品名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="type"
            label="型号"
            width="200">
            </el-table-column>
            <el-table-column
            prop="weight"
            label="净重（吨）"
            width="130">
            </el-table-column>
            <el-table-column
            prop="price"
            label="单价(元)"
            width="130">
            </el-table-column>
            <el-table-column
            prop="addictions"
            label="附属商品"
            width="130">
            </el-table-column>
            <el-table-column
            prop="addictionsprice"
            label="附属商品合计"
            width="130">
            </el-table-column>
            <el-table-column
            prop="carnumber"
            label="车牌号"
            width="130">
            </el-table-column>
            <el-table-column
            prop="drivername"
            label="司机姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="recount"
            label="财务复核金额"
            width="130">
            </el-table-column>
            <el-table-column
            prop="rewhy"
            label="复核原因"
            width="130">
            </el-table-column>
            <el-table-column
            prop="zhuangtai"
            label="状态"
            width="130">
            </el-table-column>
        </el-table>
        </el-row>
    </el-tab-pane>
    </el-tabs>
   </div> 
</template>
<script>
export default {
    data(){
        return{ 
            tableData: [{
            data:'2018-11-28',
            sitename:'东鼎-鼎天双湖畔花园',
            huwuname:'预拌抹灰砂浆',
            type:'DMP15',
            weight:'31.4',
            price:'245.00',
            addictionsprice:'200.00',
            addictions:'防冻剂*10，防冻剂...',
            carnumber:'浙AY815D',
            drivername:'张三',
            recount:'暂无',
            rewhy:'暂无',
            zhuangtai:'未入账'
        }],
        sites: [{
        value:'A',
          label: '旭辉运河悦章'
        }, {
        value:'B',
          label: '大江大河'
        }],
        form: {
          date1: '',
          date2: ''
        }
        }
       
    }
}
</script>
<style scoped src="../../style/mine.css">

</style>